<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import { ArrowDown, CircleCheck, Delete, Switch, Warning } from '@element-plus/icons-vue'

  defineOptions({
    name: 'HeaderFeeStandards',
  })

  const props = defineProps({
    selecttion: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'get-list', value: string): void
    (
      e: 'multiple-operate',
      value: 'enable' | 'disable' | 'delete' | 'mobileShow' | 'mobileHide',
    ): void
  }>()

  // 搜索关键字
  const keyword = ref('')

  /**
   * 重置
   */
  const reset = () => {
    keyword.value = ''
    emits('get-list', keyword.value)
  }
</script>

<template>
  <div class="service-cost-standards-header">
    <div class="btn-group">
      <router-link to="/order/fee/standard/create">
        <h-plain-button>添加收费标准</h-plain-button>
      </router-link>
      <el-dropdown trigger="click">
        <HButton :disabled="props.selecttion.length === 0">
          批量操作
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </HButton>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="emits('multiple-operate', 'enable')">
              <el-icon>
                <CircleCheck />
              </el-icon>
              批量启用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-operate', 'disable')">
              <el-icon>
                <Warning />
              </el-icon>
              批量禁用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-operate', 'delete')">
              <el-icon>
                <Delete />
              </el-icon>
              批量删除
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-operate', 'mobileShow')">
              <el-icon>
                <Switch />
              </el-icon>
              移动端显示
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-operate', 'mobileHide')">
              <el-icon>
                <Switch />
              </el-icon>
              移动端隐藏
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="search">
      <el-input
        v-model.trim="keyword"
        placeholder="请输入关键字"
        clearable
        @clear="reset"
        @keydown.enter="emits('get-list', keyword)"
      />
      <h-button type="primary" @click="emits('get-list', keyword)">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .service-cost-standards-header {
    display: flex;
    justify-content: space-between;

    .btn-group {
      display: flex;
      column-gap: 5px;
    }

    .search {
      display: flex;
      column-gap: 5px;

      :deep(.el-input) {
        width: 160px;
      }
    }
  }
</style>
